<template>
    <view class="gd_tips" v-if="obj.audit == '审核中'">
        <view class="gd_tips_icon">
            <image class="image" src="/static/images/tips.png" mode="widthFix"></image>
        </view>
        <view class="gd_tips_title">已提交审核中请耐心等待...</view>
        <view class="gd_tips_txt">
            预计1-2天有审核结果<br>
            审核通过后可以进入商家中心页面<br>
            刷新页面重新获取审核信息
        </view>
        <view class="gd_shuaxin" @click="reload">刷新</view>
    </view>

    <template v-else>
        <item title="营业执照" required width="160rpx">
            <upload v-model="obj.business_license" watermarkText="仅供网站展示" />
        </item>
        <item title="营业执照注册号" required>
            <wd-input v-model="obj.business_license_number" clearable />
        </item>
        <item title="店铺名称" required>
            <wd-input v-model="obj.name" clearable />
        </item>
        <item title="法人会员手机号" required tips="请法人先使用手机号登录本平台完成账号注册">
            <wd-input v-model="obj.mobile" clearable type="number" />
        </item>
        <item title="验证码" required>
            <view class="code_box">
                <wd-input v-model="obj.code" clearable type="number" class="code_input" />
                <view class="code" @click="send()">{{ timer }}</view>
            </view>
        </item>
        <item title="选择所在地" required rightIcon="arrow-down" @click="district_show = true" class="district">
            {{ obj.province + obj.city + obj.district || '请选择' }}
        </item>
        <item title="详细地址" required>
            <wd-textarea v-model="obj.address" clearable auto-height :maxlength="255" />
        </item>
        <item title="选择地址" required @click="chooseLocation()" rightIcon="arrow-right">
            <view class="navigation_address">{{ obj.navigation_address }}</view>
        </item>
        <view class="agreement">
            <view class="icon" :class="agree ? 'active' : ''" @click="agree = !agree"><wd-icon name="check-bold"
                    size="12" :color="agree ? 'white' : '#ccc'" /></view>
            我已阅读并同意<text>开店协议</text>
            <!-- TODO : 开店协议 -->
        </view>
        <bottom_button title="提交" :fixed="false" class="submit" @click="submit()" />
    </template>

    <district v-model:show="district_show" :province_id="obj.province_id" :city_id="obj.city_id"
        :district_id="obj.district_id" :province="obj.province" :city="obj.city" :district="obj.district"
        @submit="district_submit" />
</template>

<script lang="ts" setup>
import { http } from '@/utils/http'
import { useStore } from "@/utils/store";
import { error, filter, SmsCode } from '@/utils'
import gcoord from 'gcoord';

const store = useStore()
const district_show = ref(false)
const obj = ref({
    id: 0,
    name: '',
    mobile: '',
    agent_member_id: store.member.id,
    business_license_number: '',
    business_license: null,
    province_id: 0,
    city_id: 0,
    district_id: 0,
    province: '',
    city: '',
    district: '',
    address: '',
    longitude: 0,
    latitude: 0,
    navigation_address: '',
    code: '',
    uuid: '',
    audit: '',
})
const agree = ref(false)
const timer = ref('发送验证码')
function send() {
    SmsCode(obj.value.mobile, timer).then(res => {
        if (res.code == 200) obj.value.uuid = res.data.uuid
    })
}
function chooseLocation() { // 点击地图
    uni.chooseLocation({
        latitude: obj.value.latitude,//纬度
        longitude: obj.value.longitude,//经度
        success: (res) => {
            if (res.errMsg == "chooseLocation:ok") {
                obj.value.longitude = res.longitude;
                obj.value.latitude = res.latitude;
                obj.value.navigation_address = res.address;
            }
        }
    });
}

function district_submit(e: any) {
    obj.value.province_id = e[0].id
    obj.value.city_id = e[1].id
    obj.value.district_id = e[2].id
    obj.value.province = e[0].text
    obj.value.city = e[1].text
    obj.value.district = e[2].text
}

function submit() {
    if (!agree.value) return uni.showToast({ title: '请勾选同意开店协议', icon: 'none' })
    if (!error([
        [!obj.value.business_license, '请上传营业执照'],
        [!obj.value.business_license_number, '请输入营业执照注册号'],
        [!obj.value.name, '请输入店铺名称'],
        [!obj.value.mobile, '请输入法人会员手机号'],
        [!obj.value.code, '请输入验证码'],
        [!obj.value.uuid, '请发送验证码'],
        [!obj.value.province_id, '请选择省份'],
        [!obj.value.city_id, '请选择城市'],
        [!obj.value.address, '请输入详细地址'],
        [(!obj.value.longitude || !obj.value.latitude), '请选择地址'],
    ])) return

    let param = JSON.parse(JSON.stringify(obj.value))
    param.code = parseInt(param.code)

    let result = gcoord.transform([param.longitude, param.latitude], gcoord.GCJ02, gcoord.BD09);
    param.longitude = result[0];
    param.latitude = result[1];

    http.post('/member/store/store_join', param).then((res: any) => {
        uni.showToast({ title: res.message, icon: "none" })
        if (res.code == 200) {
            setTimeout(() => {
                obj.value.audit = '审核中'
            }, 1200);
        }
    })
}

http.get('/member/store/store_join').then((res: any) => {
    if (res.code == 200) {
        let result = gcoord.transform([res.data.longitude, res.data.latitude], gcoord.BD09, gcoord.GCJ02);
        res.data.longitude = result[0];
        res.data.latitude = result[1];

        filter(res.data, obj.value)
        if (res.data.audit == '审核不通过') uni.showModal({ title: '审核不通过', content: res.data.audit_message })

    }
})

function reload() {
    location.reload()
}
</script>

<style scoped>
.code_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.code {
    width: 180rpx;
    margin-left: 20rpx;
    font-size: 26rpx;
    line-height: 35px;
    text-align: center;
    border: solid 1px #e5e5e5;
    border-radius: 10rpx;
}

.navigation_address {
    display: inline-block;
    width: 90%;
    font-size: 28rpx;
    vertical-align: middle;
}

.submit {
    margin-top: 40rpx;
}

.code_input {
    width: calc(100% - 180rpx);
}

.district {
    font-size: 28rpx;
}

.agreement {
    display: flex;
    align-items: flex-end;
    color: #666;
}

.agreement text {
    color: #2979ff;
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
    margin-bottom: 6rpx;
    border: solid 1px #ccc;
    border-radius: 6rpx;
}

.icon.active {
    color: white;
    background: #2979ff;
    border-style: none;
}


.gd_tips {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100vh;
    padding-top: 40%;
    text-align: center;
    background: white;
}

.gd_tips_icon {
    width: 110rpx;
    margin: 0 auto;
}

.gd_tips_icon .image {
    width: 100%;
    height: 100%;
}

.gd_tips_title {
    margin: 40rpx 0 60rpx;
    font-size: 38rpx;
}

.gd_tips_txt {
    font-size: 32rpx;
    line-height: 48rpx;
    color: #8c8c8c;
}

.gd_shuaxin {
    display: inline-block;
    width: 35%;
    margin: 80rpx auto;
    font-size: 34rpx;
    line-height: 75rpx;
    color: #F1404B;
    cursor: pointer;
    border: solid 1px #F1404B;
    border-radius: 50rpx;
}
</style>